@-webkit-keyframes progress {
  0% { width: 1%; }
  100% { width: 100%; }
}

.project {
  @project-background: mix(@background, #888, 80%);
  @project-foreground: mix(@foreground, #888, 80%);
  @width: 200px;
  box-shadow: inset -8px 0 12px rgba(0, 0, 0, .2);

  overflow-x: auto;
  overflow-y: auto;
  background: @project-background;
  color: @project-foreground;
  flex-shrink: 0;
  position: relative;

  transition: width .3s ease-in-out, border-width .3s ease-in-out, padding .3s linear;
  &.autohide {
    transition: width .3s ease-in-out .3s, border-width .3s ease-in-out .3s, padding .3s linear .3s;
  }

  &.resizing {
    transition: none;
    cursor: col-resize;
    
    a {
      cursor: col-resize;
    }
  }

  //display: none;
  width: 0px;
  padding: 4px 0;

  &.autohide.show {
    padding: 4px 0;
    width: 0px;
    border-right: 15px solid @project-background;

    &:hover, &.loading {
      padding: 4px 8px;
      width: @width;
      border-right-width: 0px;
    }
  }

  &.show:not(.autohide) {
    width: @width;
    padding: 4px 8px;
  }

  a {
    display: block;
    padding: 4px;
    text-decoration: none;
    color: inherit;
    white-space: nowrap;
    border-radius: 2px;
    border-left: 1px solid transparent;

    &:hover {
      text-decoration: underline;
    }

    &:active {
      background: fade(@project-foreground, 15%);
    }

    &:focus {
      outline: none;
    }

    &.active-file {
      background: @background;
      border-left: 1px solid @accent;
      color: @foreground;
    }
  }

  ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }

  li {
    color: @project-foreground;
    white-space: no-wrap;

    & > ul {
      display: none;
      padding-left: 12px;
    }

    &.expanded > ul {
      display: block;
    }
  }

  .directory {
    position: relative;
    font-weight: bold;

    &:before {
      transform-origin: 50% 50%;
      content: url("");
      position: absolute;
      left: -13px;
      opacity: .5;
      transition: all .3s;
    }

    &:hover:before {
      opacity: 1;
    }
  }

  .root {

    &:not(:first-child) {
      border-top: 1px solid #888;
      margin-top: 4px;
      padding-top: 4px;
    }

    & > .directory {
      font-weight: bold;

      &:before {
        content: none;
      }
    }
  }

  .expanded > .directory:before {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }

  .load-ui {
    display: none;
    position: absolute;
    width: 100%;
    background: darken(@background, 20%);
    color: @foreground;
    font-weight: bold;
    text-align: center;
    top: 0;
    left: 0;
    padding-top: 8px;
    z-index: 9;

    .progress {
      background: @accent;
      height: 2px;
      margin-top: 6px;
      -webkit-animation: progress 2s infinite ease-in-out;
    }

  }

  &.loading .load-ui {
    display: block;
  }
}

.project-resizer {
  .autohide & {
    display: none;
  }

  position: absolute;
  height: 100%;
  right: 0;
  top: 0;
  width: 16px;
  cursor: col-resize;
}
